<template>
    <div class="root" style="position: relative;">
        <div class="button" style="position: absolute;">
            <el-button type="primary"  @click="chanPage('/dapin')">BI大屏</el-button>
      <el-button type="primary"  @click="chanPage('/page')">弹窗</el-button>
      <el-button type="primary"  @click="chanPage('/login')">聊天</el-button>
      <el-button type="primary"  @click="chanPage('/pagination')">字典维护</el-button>

        </div>
        
      <router-view></router-view> <!-- 显示路由组件 -->
  <div class="common-layout" height="1600px">
    <el-container>
      <el-header width="100%" height="250px" style="background-color:#0E0F48;"><Header></Header></el-header>

    <el-container>
      <el-aside width="460px"  style="height: 900px; display: grid; grid-template-rows: auto auto;background-color: #0E0F48;"><leftTop></leftTop><leftbottom></leftbottom></el-aside>
      <el-main style="background-color: #0E0F48;"><center></center></el-main>
      <el-aside width="450px" style="background-color: #0E0F48; display: grid; grid-template-rows: auto auto;"><rightTop></rightTop><rightBottom></rightBottom></el-aside>
    </el-container>
  </el-container>
  </div>


    </div>
  </template>
  
  <script>
  import leftTop from '@/components/leftTop.vue';
  import leftbottom from '@/components/leftbottom.vue';
  import rightTop from '@/components/rightTop.vue';
  import rightBottom from '@/components/rightBottom.vue';
  import center from '@/components/center.vue';
  import Header from '@/components/Header.vue';
  export default {
    data() {
      return {
        
      };
    },
    components:{
      leftTop,leftbottom,rightTop,rightBottom,center,Header
    },
    methods:{
        chanPage(path){
        this.$router.push({ path: path });
      }
    }
  };
  </script>
  
  <style scoped>
  /* 样式 */
  .el-aside {
  border-top: #2E81E0 2px solid;
  border-left: #2E81E0 2px solid;
  border-right: #2E81E0 2px solid;
  box-sizing: border-box;
  overflow: hidden; /* 新增：隐藏组件内溢出内容，禁止内部滚动条 */
}

.el-main {
  border-top: #2E81E0 2px solid;
  border-left: #2E81E0 2px solid;
  border-right: #2E81E0 2px solid;
  box-sizing: border-box;
  overflow: hidden; /* 新增：隐藏组件内溢出内容，禁止内部滚动条 */
}
  </style>